<template>
	<view>		
		<!-- 轮播图 -->
			<view class="box" v-if="Goods.gallery.length">
			<u-swiper :list="Goods.gallery" indicator circular keyName="img_url" :autoplay="true" :interval="1500" img-mode="heightFix" height="221" indicatorActiveColor="pink"  indicatorMode="dot"></u-swiper>
			</view>

			
			<!--  -->
		<view class="goodstop">
			<view class="item" v-for="item in name" :key="item.id">
				<u-icon :label="item.name" size="15" labelSize="20rpx" name="checkmark-circle-fill" color="#e10000"></u-icon>
			</view>
		</view>
		<!--  -->
		<view class="goods">
			<view class="item">
				{{Goods.info.name}}
				<br>
				{{Goods.info.goods_brief}}
				<br>
				<text>{{Goods.info.retail_price | priceFormat}}</text>
			</view>
		</view>
		<view class="title-h">
		<u-popup :show="show" @close="close" closeable safeAreaInsetBottom >
		<view class="Wrapper">
		<view class='content'>
		<view class='item'>
			<view class="itemHot">
			 <image :src="Goods.info.list_pic_url" mode="widthFix"></image>
				</view>
				<view class="itemText">
					<view class="text">{{Goods.info.name}}</view>
					<view class="text">{{Goods.info.retail_price | priceFormat}}</view>
					<view class="text">库存:{{Goods.info.goods_number}}</view>
				</view>
			  </view>
		</view>
		<view class="add">
			<text>数量:</text>
			<u-number-box v-model="value" @change="valChange"></u-number-box>
		</view>
		</view>
		</u-popup>
		<u-button @click="show = true">打开</u-button>
		</view>
		

		<!-- 商品参数 -->
		<view class="shop-param">
			<view class="shop-param-title">商品参数</view>
			<view class="param-box" v-for="item in Goods.attribute" :key="item.id">
				<view class="param-box-name">{{ item.name }}</view>
				<view class="param-box-value">{{ item.value }}</view>
			</view>
		</view>
		
		
		
		<!-- 常见问题 -->
		<view class="HotWrapper">
		<view class="title-x">
	   <view class="thirdLine">
			<span class="line"></span>
			<view class="txt">
			  <span>常见问题</span>
			</view>
			<span class="line"></span>
		  </view>
		</view>
		
		<view class='content'>
			  <view class='item' v-for="item in Goods.issue" :key="item.id">
				<view class="itemText">
					
					<view class="text">*{{item.question}}</view>
					<view class="text">{{item.answer}}</view>
				</view>
			  </view>
		</view>
		</view>
		
		<!-- 相关产品 -->
		<view class="GoodsList">
		<view class="title-x">
			<view class="thirdLine">
						<span class="line"></span>
						<view class="txt">
						  <span>相关产品</span>
						</view>
			<span class="line"></span>
			</view>
			</view>
		<view class="boxGoodsListTow">
		<view class='content'>
			  <view class='item' v-for="item in GoodsRelat" :key="item.id" @tap="showdetail(item.id)">
			  <image :src="item.list_pic_url" mode="widthFix"></image>
			  <view class="text">{{item.name}}</view>
			  <view class="text">{{item.retail_price | priceFormat}}</view>
			  </view>
		</view>
		</view>
		</view>
		
		
		
		<!--底部 -->
		
		<view class="footer">
			<view class="san">
				<view class="item" @click="star()">
					<u-icon :name="star0"   size="24"></u-icon>
					{{star1}}
				</view>
				<view class="item" @click="shopping()">
					<u-icon name="shopping-cart"  size="24"></u-icon>
					购物车
				</view>
			</view>
			<view class="button-q">
				<view class="item">
					<u-button type="primary" text="立即购买"></u-button>
				</view>
				<view class="item">
					<u-button type="primary"  text="加入购物车" @click="cartAdd()" ></u-button>
				</view>
			</view>
		</view>
		
		</view>

		
	</view>

	
</template>

<script>
	import {mapState} from"vuex"
	export default {
		data() {
			return {
				show: false,
				Goods:"",
				value:"",
				GoodsRelat:'',
				name:[
					{name:"30天无忧退货 ",
					url:"",
					id:1
					},
					{name:"48小时快速退费 ",
					url:"",
					id:2
					},
					{name:"满88元免邮费",
					url:"",
					id:3
					},
				],
				starShow:false,
				star0:"star",
				star1:"未收藏"
			}
		},
		methods: {
		  close() {
			this.show = false
			// console.log('close');
		  },
		  star(){
			this.starShow=!this.starShow
			if(this.starShow){
				this.star0="star-fill",
				this.star1="收藏"
			}else{
				this.star0="star",
				this.star1="未收藏"
			}
		  },
		  showdetail(id){
		  	this.$store.dispatch("goods/actionsGoods",id.toString())
		  },
		  cartAdd(){
			this.show = true
		  },
		shopping(){
			uni.switchTab({
				url:"/pages/cart/cart"
			})
		}
		},
		computed:{
			...mapState({
				GoodsIndex:(state)=>state.goods.GoodsIndex
			})
		},
		onLoad(options){
			console.log(JSON.parse(options.data))
			this.Goods=JSON.parse(options.data)
			this.GoodsRelat=JSON.parse(uni.getStorageSync("GoodsRelat"))
		},
		updated() {
		},
		onShow() {
		}
	}
</script>

<style lang="scss">

	.goodstop{
		padding: 10rpx;
		// background-color: #f5f6f9;
		display: flex;
		justify-content: space-between;
	}
	.goods{
		background-color: white;
		padding: 40rpx;
		text-align: center;
		line-height: 80rpx;
		text{
			color: darkred;
		}
	}	
	
	page{
		background-color: #efefef;
		padding-bottom: 100rpx;
	}
	
	// .title-y{
	// 	background-color: white;
	// 	padding: 20rpx;
	// 	font-size: 38rpx;
	// 	margin: 40rpx 0 20rpx;
	// }
	
	
	.HotWrapper{
		background-color: white;
		margin: 40rpx 0 0;
		padding-bottom: 20rpx;
		.content{
		margin-top: 20rpx;
		 display:flex;
		 flex-wrap: wrap;
			.item{
			margin-top: 20rpx;
			width: 100vw;
			display:flex;
			.itemText{
				display:flex; 
				flex-direction:column;
				width: 98%;
				padding: 20rpx;
				.text{
					&:nth-child(1){
						font-size: 34rpx;
					}
				}
			}
			}
		}
	}
	.title-x{
		background-color: white;
		width: 100vw;
		text-align: center;
		.thirdLine {
		  text-align: center;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  .line {
		    display: inline-block;
		    width: 110rpx;
		    height: 4rpx;
		    background: #e4e7ed;
		  }
		  .txt {
		    color: #550000;
		    vertical-align: middle;
		    display: flex;
		    flex-direction: column;
		    font-size: 36rpx;
		    margin: 0 30rpx;
		  }
		}
		}
		
		.GoodsList{
			background-color: white;
			.boxGoodsListTow{
				padding:40rpx 0;
				text-align: center;
				.title-h{
					font-size: 34rpx;
					width: 100%;
				}
				.content{
				padding-top: 20rpx;
				 display:flex;
				 flex-wrap: wrap;
				 justify-content: space-between;
					.item{
					 width:calc(100%/2 - 20rpx);
					 image{
						 vertical-align: middle;
						 width: 100%;
					 }
					 .text{
						 font-size: 28rpx;
						 &:nth-child(3){
							 color: #964129; 
						 }
					 }
					}
				}
			}
		}
		
		
		// 商品参数
		.shop-param {
			margin: 40rpx 0 20rpx;
			background-color: white;
			padding-bottom: 20rpx;
		}
		.shop-param-title {
			margin: 0 auto;
			width: 710rpx;
			line-height: 80rpx;
			font-size: 40rpx;
		}
		.param-box {
			width: 710rpx;
			margin: 10rpx auto;
			height: 60rpx;
			border-radius: 16rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			background-color: #efefef;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		
			.param-box-name {
				width: 180rpx;
				color: #999999;
				padding-left: 10rpx;
			}
			.param-box-value {
				flex: 1;
			}
		}
		
		
		.footer {
		
		position: fixed;
		
		left: 0px;
		
		bottom: 0px;
		
		width: 100%;
		
		height: 100rpx;
		
		background-color: #eee;
		
		z-index: 99999;
		display: flex;
		.san{
			width: 30vw;
			display: flex;
			.item{
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
		}
		.button-q{
			width: 70vw;
			display: flex;
			.item{
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		}
		
		.Wrapper{
			background-color: white;
			margin: 40rpx 0;
			padding-bottom: 110rpx;
			.add{
			 text{
				 line-height: 100rpx;
				 font-size: 36rpx;
				 
			 }
			}
			.content{
			margin-top: 20rpx;
			 display:flex;
			 flex-direction: column;
				.item{
				margin-top: 20rpx;
				background-color: #f4f4f4;
				width: 100vw;
				display:flex;
				.itemHot{
					width: 28%;
				}
				.itemText{
					display:flex; 
					flex-direction:column;
					width: 70%;
					padding: 20rpx;
					.text{
						 flex: 1;
						 font-size: 24rpx;
						 &:nth-child(1){
							font-size: 36rpx;
						 }
						 &:nth-child(3){
							 color: #964129; 
						 }
					}
				}
				 image{
					 vertical-align: middle;
					 width: 100%;
				 }
				}
			}
		}
</style>
